import store from "../../store/";
import React, { useEffect, useState } from "react";
import { Table } from "antd";
import { observer } from "mobx-react";

import "./index.css";
import { Modal } from "antd";
const Processing = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [Id, setId] = useState(0);
  let obj1 = {};
  const showModal = (record) => {
    setIsModalVisible(true);
    setId(record.sale_id);
    console.log(Id + "id");
    obj1 = {};
  };

  //删除
  let delect = (record) => {
    let id = record.sale_id;

    let dex = 1;
    store.AfterSales.del(id, dex);
    //渲染页面
  };
  /*  获取编辑的值 */
  const newdata = (e) => {
    console.log(e.target.name + e.target.value);
    obj1[e.target.name] = e.target.value;
  };
  //模态框发起请求
  //页码跳转
  const Change = (pagination) => {
    let page = pagination.current;
    store.AfterSales.Processinglist(page);
  };
  const handleOk = (e) => {
    let dex = 1;
    setIsModalVisible(false);
    console.log(e.currentTarget.getAttribute("data-name"));
    store.AfterSales.edit(obj1, Id, dex);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const columns = [
    {
      title: "客户名称",
      dataIndex: "customer_name",
      key: "sale_id",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "联系人",
      dataIndex: "contact_name",
      key: "sale_id",
    },
    {
      title: "售后状态",
      dataIndex: "after_state",
      key: "sale_id",
      render: (text, record) => (
        <button
          className={
            text === 0
              ? "lanse"
              : text === 1
              ? "hongse"
              : text === 2
              ? "lvse"
              : ""
          }
        >
          {text === 0
            ? "未处理"
            : text === 1
            ? "处理中"
            : text === 2
            ? "已完成"
            : ""}
        </button>
      ),
    },
    {
      title: "售后分类",
      dataIndex: "after_classification",
      key: "sale_id",
    },
    {
      title: "反馈时间",
      dataIndex: "feedback_time",
      key: "sale_id",
    },
    {
      title: "相关商品",
      dataIndex: "customer_name",
      key: "sale_id",
    },
    {
      title: "反馈主题",
      dataIndex: "related_products",
      key: "sale_id",
    },
    {
      title: "备注",
      dataIndex: "comment",
      key: "sale_id",
    },
    {
      title: "处理时间",
      dataIndex: "handling_time",
      key: "sale_id",
    },
    {
      title: "处理结果",
      dataIndex: "result_handling",
      key: "sale_id",
    },
    {
      title: "业务员",
      dataIndex: "user_name",
      key: "sale_id",
    },
    {
      title: "操作",
      key: "sale_id",
      render: (_, record) => {
        return (
          <>
            <span className="bianji" onClick={() => showModal(record)}>
              编辑
            </span>
            <span className="shanchu" onClick={() => delect(record)}>
              删除
            </span>
          </>
        );
      },
    },
  ];

  useEffect(() => {
    let page = 1;
    store.AfterSales.Processinglist(page);
  }, []);
  return (
    <>
      <Table
        onChange={Change}
        pagination={{
          pageSize: 10,
          total: store.AfterSales.total, //多少条数据，默认给你分配多少页
        }}
        rowKey={(record) => record.sale_id}
        columns={columns}
        dataSource={store.AfterSales.data}
      />

      <Modal
        title="编辑"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
        width="640px"
      >
        <div id="mod">
          <ul>
            <li style={{ display: "flex" }}>
              <span>相关商品</span>
              <span>
                <input type="text" name="related_products" onChange={newdata} />
              </span>
            </li>{" "}
            <li style={{ display: "flex" }}>
              <span>反馈主题</span>
              <span>
                <input type="text" name="feedback_theme" onChange={newdata} />
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>售后分类</span>
              <span>
                <select onChange={newdata} name="after_classification">
                  <option value="0">请选择</option>
                  <option value="产品质量">产品质量</option>
                  <option value="操作问题">操作问题</option>
                  <option value="其他问题">其他问题</option>
                </select>
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>联系人</span>
              <span>
                <input type="text" name="contact_name" onChange={newdata} />
              </span>
            </li>{" "}
            <li style={{ display: "flex" }}>
              <span>反馈时间</span>
              <span>
                <input
                  type="date"
                  name="feedback_time"
                  onChange={newdata}
                ></input>
              </span>
            </li>{" "}
            <li style={{ display: "flex" }}>
              <span>备注</span>
              <span>
                <input type="text" name="comment" onChange={newdata} />
              </span>
            </li>{" "}
            <li style={{ display: "flex" }}>
              <span>售后状态</span>
              <span>
                <select onChange={newdata} name="after_state">
                  <option value="">请选择</option>
                  <option value="0">未处理</option>
                  <option value="1">处理中</option>
                  <option value="2">已处理</option>
                </select>{" "}
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>处理时间</span>
              <span>
                <input
                  type="date"
                  name="handling_time"
                  onChange={newdata}
                ></input>
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>处理结果</span>
              <span>
                <input type="text" name="result_handling" onChange={newdata} />
              </span>
            </li>
          </ul>
        </div>
      </Modal>
    </>
  );
};
export default observer(Processing);
